<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose"
    :destroyOnClose="true"
    :width="800"
    :headerStyle="{ position: 'fixed', top: 0, width: '100%', background: '#fff', zIndex: 2 }"
    :body-style="{ paddingBottom: '80px' }"
  >
    <a-form @submit="handleSubmit" :form="form" :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 15 }, sm: { span: 17 } }" style="padding-top: 60px">
      <a-form-item label="名称">
        <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入名称！' }] }]" name="name" placeholder="请输入" autocomplete="off" :maxLength="8" />
        <span>不建议修改风格，会造成该场合要盒数统计不准确，若有新的风格建议新增</span>
      </a-form-item>
      <a-form-item label="图片" required>
        <JImageUpload :uploadParams="uploadParams" :isMultiple="false" :accept="'image/*'" @fileChange="fileChange" v-model="cardImg"></JImageUpload>
        <div class="tip" v-show="tips.cardImg">请上传图片！</div>
      </a-form-item>
      <a-form-item label="适用搭配类型">
        <a-radio-group name="radioGroup" v-decorator="['gender', { rules: [{ required: true }], initialValue: 0 }]">
          <a-radio :value="0">女装</a-radio>
          <a-radio :value="1">男装</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="主题搭配品牌">
        <a-select show-search allowClear v-decorator="['brand', { rules: [{ required: true, message: '请输入名称！' }] }]" placeholder="请选择" :filter-option="filterOption">
          <a-select-option v-for="(item, index) in queryData.brands" :key="index" :value="item.id">{{ item.attribname }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="关联有搭ID">
        <a-input v-decorator="['takeID', { rules: [{ required: true, message: '请输入名称！' }] }]" name="name" placeholder="请输入" autocomplete="off" :maxLength="8" />
      </a-form-item>
      <a-form-item label="搭配师库存">
        <a-input v-decorator="['stock', { rules: [{ required: true, message: '请输入名称！' }] }]" name="name" placeholder="请输入" autocomplete="off" :maxLength="8" />
      </a-form-item>
      <a-form-item label="导购库存">
        <a-input v-decorator="['storage', { rules: [{ required: true, message: '请输入名称！' }] }]" name="name" placeholder="请输入" autocomplete="off" :maxLength="8" />
      </a-form-item>
      <a-form-item label="启用状态">
        <a-radio-group name="isactive" v-decorator="['isactive', { rules: [{ required: true }], initialValue: 1 }]">
          <a-radio :value="1">启用</a-radio>
          <a-radio :value="0">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onClose">取消</a-button>
        <a-button type="primary" htmlType="submit">确定</a-button>
      </div>
    </a-form>
  </a-drawer>
</template>
<script>
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import { attrCreateOrUpdateValue } from '@/api/box/setting'
import returnRecordModalVue from '../../../serviceOrder/components/returnRecordModal.vue'
import pick from 'lodash.pick'
import { mapValues } from 'lodash'
export default {
  props: ['uploadParams', 'queryData'],
  components: { JImageUpload },
  data() {
    return {
      lookId: '',
      title: '',
      visible: false,

      form: this.$form.createForm(this),
      imgObj: {
        cardImg: []
      },
      tips: {
        cardImg: false
      },
      cardImg: []
    }
  },
  computed: {},
  mounted() {},
  methods: {
    // 下拉框搜索
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 弹框
    showModal(item) {
      this.lookId = item.id
      if (item != 'add') {
        this.title = '编辑'
        this.echo(item)
      } else {
        this.title = '新增'
      }

      this.visible = true
    },
    // 回显
    echo(item) {
      console.log(item)
      let self = this
      let info = JSON.parse(JSON.stringify(item))
      info.isactive = info.isactive == 'Y' ? 1 : 0
      info.gender = info.gender == '男装' ? 1 : 0
      this.cardImg = item.img ? [item.img] : ''
      setTimeout(() => {
        self.form.setFieldsValue(pick(info, 'name', 'gender', 'isactive'))
      }, 0)
    },
    // 上传图片
    fileChange(list) {
      this.imgObj.cardImg = list
      this.tips.cardImg = false
    },
    // 保存
    handleSubmit(e) {
      e.preventDefault()
      if (this.imgObj.cardImg && this.imgObj.cardImg.length > 0) {
        this.tips.cardImg = false
      } else {
        this.tips.cardImg = true
      }
      this.form.validateFields((err, values) => {
        console.log(values)
        return
        if (!err) {
          let params = {
            requestData: {}
          }
          if (this.baseId) params.requestData.id = this.lookId

          attrCreateOrUpdateValue(params).then(res => {
            if (res.code == 0) {
              this.$message.warning('保存成功')
              this.onClose()
              this.$emit('editOk')
            } else {
              this.$message.warning(res.msg)
            }
          })
        }
      })
    },
    // 取消
    onClose() {
      this.form.resetFields()
      this.visible = false
      this.tips.cardImg = false
    }
  }
}
</script>

<style lang="less" scoped>
.tip {
  color: #f5222d;
  line-height: 22px;
  margin-top: -8px;
}
</style>